import React, { useState, useEffect } from 'react';
import { Row, Col, Card, Select, Input, Pagination } from 'antd';
import { BookOutlined } from '@ant-design/icons';

const { Option } = Select;
const { Search } = Input;

// 模拟图书数据
const mockBooks = Array.from({ length: 100 }, (_, index) => ({
  id: index + 1,
  title: `图书标题 ${index + 1}`,
  author: `作者 ${index + 1}`,
  category: ['文学', '科技', '历史'][Math.floor(Math.random() * 3)],
  cover: 'https://via.placeholder.com/150',
  popularity: Math.floor(Math.random() * 1000),
  publishDate: new Date(2000 + Math.floor(Math.random() * 23), Math.floor(Math.random() * 12), Math.floor(Math.random() * 28)).toISOString().split('T')[0]
}));

const BookList = () => {
  const [books, setBooks] = useState(mockBooks);
  const [filteredBooks, setFilteredBooks] = useState(mockBooks);
  const [currentPage, setCurrentPage] = useState(1);
  const [pageSize, setPageSize] = useState(12);
  const [category, setCategory] = useState('');
  const [sortBy, setSortBy] = useState('');

  useEffect(() => {
    let newFilteredBooks = [...books];

    // 分类筛选
    if (category) {
      newFilteredBooks = newFilteredBooks.filter(book => book.category === category);
    }

    // 排序功能
    if (sortBy === 'popularity') {
      newFilteredBooks.sort((a, b) => b.popularity - a.popularity);
    } else if (sortBy === 'publishDate') {
      newFilteredBooks.sort((a, b) => new Date(b.publishDate) - new Date(a.publishDate));
    }

    setFilteredBooks(newFilteredBooks);
  }, [category, sortBy, books]);

  const indexOfLastBook = currentPage * pageSize;
  const indexOfFirstBook = indexOfLastBook - pageSize;
  const currentBooks = filteredBooks.slice(indexOfFirstBook, indexOfLastBook);

  const handlePageChange = (page, pageSize) => {
    setCurrentPage(page);
    setPageSize(pageSize);
  };

  return (
    <div>
      {/* 分类筛选和排序 */}
      <Row justify="space-between" align="middle" gutter={[16, 16]} style={{ marginBottom: 16 }}>
        <Col>
          <Select
            placeholder="选择分类"
            onChange={(value) => setCategory(value)}
            style={{ width: 120 }}
          >
            <Option value="">全部</Option>
            <Option value="文学">文学</Option>
            <Option value="科技">科技</Option>
            <Option value="历史">历史</Option>
          </Select>
        </Col>
        <Col>
          <Select
            placeholder="排序方式"
            onChange={(value) => setSortBy(value)}
            style={{ width: 120 }}
          >
            <Option value="">默认</Option>
            <Option value="popularity">按热度</Option>
            <Option value="publishDate">按出版时间</Option>
          </Select>
        </Col>
      </Row>

      {/* 书籍卡片展示 */}
      <Row gutter={[16, 16]}>
        {currentBooks.map(book => (
          <Col key={book.id} xs={24} sm={12} md={8} lg={6}>
            <Card
              hoverable
              cover={<img alt={book.title} src={book.cover} />}
              actions={[<BookOutlined />]}
            >
              <Card.Meta title={book.title} description={`作者: ${book.author}`} />
              <div>分类: {book.category}</div>
              <div>热度: {book.popularity}</div>
              <div>出版时间: {book.publishDate}</div>
            </Card>
          </Col>
        ))}
      </Row>

      {/* 分页展示 */}
      <Pagination
        current={currentPage}
        pageSize={pageSize}
        total={filteredBooks.length}
        onChange={handlePageChange}
        style={{ marginTop: 16, textAlign: 'center' }}
      />
    </div>
  );
};

export default BookList;